<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>生命体征检测云平台</title>
		<link rel="shortcut icon" href="static/logo.ico" />
		<link rel="stylesheet" href="static/css/index.css" />
		<link rel="stylesheet" href="static/layui/css/layui.css" media="all" />
		<script type="text/javascript" src="static/js/jquery.min.js"></script>
		<script type="text/javascript" src="static/layui/layui.js"></script>
		<script type="text/javascript" src="static/js/vue.js"></script>
		<script type="text/javascript" src="static/js/axios.min.js"></script>
		<style>
			.container {
				height: auto;
				width: 100%;
				padding: 20px;
				background-color: #e5e5e5;
			}

			.collision-btn.disable {
				background-image: none;
				color: lightgrey;
				border-color: lightgrey;
				cursor: not-allowed;
			}

			.collision-btn.disable:hover {
				background-color: #fff;
				border-color: lightgrey;
			}

			.input-card .btn {
				margin-right: .8rem;
			}

			.amap-marker {
				opacity: 0.01;
			}

			.nav-right {
				top: 1.5rem !important;
			}

			.layui-timeline-axis {
				color: #aa0000;
			}

			.layui-timeline-content p {
				margin: 1rem;
				padding: 20px;
				line-height: 60px;
				text-align: left;
				background-color: #ffffff;
				color: #000000;
				border-radius: 10px;
			}

			.layui-form-label {
				width: 110px !important;
				height: 30px;
				font-size: 16px;
			}
		</style>
		<script>
			$(function() {
				$(".sign_out").click(function() {
					$(".sign_out").click(function() {
						localStorage.clear();
						window.location = 'login.html'
					});
				});
			});
			layui.use(['form', 'laydate', 'layer'], function() {
				var laydate = layui.laydate;
				var layer = layui.layer;
				var form = layui.form;
				form.on('switch(checkbox)', function(data) {
					layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
						offset: '6px'
					});
					layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
				});
				form.render();
				laydate.render({
					elem: '#sotime',
					type: 'datetime',
					//设置开始日期、日期日期的 input 选择器
					//数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
					range: ['#test-startDate-1', '#test-endDate-1']
				});
				// var cform = '<form class="layui-form" action="">';
				// cform += '<div class="layui-form-item">';
				// cform += '<label class="layui-form-label">开关-默认关</label>';
				// cform += '<div class="layui-input-block">';
				// cform += '<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">';
				// cform += '</div>';
				// cform += '</div>';
				// cform += '</form>';
				var cform = '<div class="layui-form-item" style="margin-top: 20px;">';
				cform += '<label class="layui-form-label">离床状态：</label>';
				cform += '<div class="layui-input-block">';
				cform +=
					' <input type="radio" name="sex" value="1" title="开启" checked="" style="margin-top: 8px;width: 20px;height: 20px;"><span>开启</span>';
				cform +=
					' <input type="radio" name="sex" value="0" title="关闭" style="margin-top: 8px;width: 20px;height: 20px;"><span>关闭</span>';
				cform += '</div>';
				cform += '  </div>';
				$('#setup').on('click', function() {
					layer.open({
						type: 1,
						title: '离床设置',
						area: ['300px', '130px'],
						shadeClose: true, //点击遮罩关闭
						content: cform
					});
				});
			});
			$(function() {
				$('.userinfo').hover(function() {

				});
			});
		</script>
	</head>
	<body>
		<div id="app">
			<div style="margin-top: 70px;background-color: #e5e5e5;"></div>
			<div class="container">
				<blockquote class="layui-elem-quote" style="height: 62px;">
					<span style="font-size: 20px ;font-weight: 800;float: left;">报警信息</span>
					<div class="layui-form" style="float: left;margin-left: 40px;">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label" style="font-size: 12px; width: 100px;">日期范围:</label>
								<div class="layui-inline" id="sotime">
									<div class="layui-input-inline">
										<input type="text" autocomplete="off" id="test-startDate-1" class="layui-input"
											placeholder="开始日期">
									</div>
									<div class="layui-form-mid">-</div>
									<div class="layui-input-inline">
										<input type="text" autocomplete="off" id="test-endDate-1" class="layui-input"
											placeholder="结束日期">
								</div>
									</div>
							</div>
						</div>
					</div>

					<a class="layui-btn layui-btn-normal" href="#"
						style="float: left;height: 30px;line-height: 26px !important;">筛选</a>
					<a class="layui-btn layui-btn-normal" href="#"
						style="float: right;line-height: 32px !important;margin-right: 30px;" id="setup">设置</a>
				</blockquote>
				<div></div>
				<ul class="layui-timeline" style="margin-top: 38px;">
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis"></i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">2022年11月26日 10:12:53</h3>
							<p>
								用户：xxxxx ，在2022年11月26日 10:12:53处理离床状态，已经电话通知
							</p>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis"></i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">2022年11月26日 10:12:53</h3>
							<p> 用户：xxxxx ，在2022年11月26日 10:12:53处理离床状态，已经电话通知</p>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis"></i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">2022年11月26日 10:12:53</h3>
							<p>

								用户：xxxxx ，在2022年11月26日 10:12:53处理离床状态，已经电话通知
							</p>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis"></i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">2022年11月26日 10:12:53</h3>
							<p>

								用户：xxxxx ，在2022年11月26日 10:12:53处理离床状态，已经电话通知
							</p>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis"></i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">2022年11月26日 10:12:53</h3>
							<p>

								用户：xxxxx ，在2022年11月26日 10:12:53处理离床状态，已经电话通知
							</p>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis"></i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">2022年11月26日 10:12:53</h3>
							<p>

								用户：xxxxx ，在2022年11月26日 10:12:53处理离床状态，已经电话通知
							</p>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis"></i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">2022年11月26日 10:12:53</h3>
							<p>

								用户：xxxxx ，在2022年11月26日 10:12:53处理离床状态，已经电话通知
							</p>
						</div>
					</li>
					<li class="layui-timeline-item">
						<i class="layui-icon layui-timeline-axis"></i>
						<div class="layui-timeline-content layui-text">
							<h3 class="layui-timeline-title">2022年11月26日 10:12:53</h3>
							<p>

								用户：xxxxx ，在2022年11月26日 10:12:53处理离床状态，已经电话通知
							</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="info">
				<div class="nav-left">
					<a class="login"></a>
					<a class="hometext" href="index.html" v-if="uInfoData.loginType !=1">首页</a>
					<a class="hometext" href="home.html" v-if="uInfoData.loginType == 1">首页</a>
				</div>
				<div class="nav-right">
					<ul>
						<li><a href="monitoring.html" v-if="uInfoData.loginType !=1">监测</a></li>
						<li><a href="historical_data.html" v-if="uInfoData.loginType !=1">历史数据</a></li>
						<li><a href="historical_info.html" v-if="uInfoData.loginType == 1">历史数据</a></li>
						<li><a href="call_p.html">离床报警</a></li>
						<li><a href="#">康养中心</a></li>
						<li><a href="#">中医问诊</a></li>
					</ul>
				</div>
				<div class="userinfo" id="userinfo">
					<img src="static/image/user.png" />
					<!-- <div class="red-dot"></div> -->
					<ul class="user_dropdown">
						<li class="dropdown_item user_ctrl">
							<div class="nickname">{{uInfoData.userName}}</div>
							<div class="sign_out">退出</div>
						</li>
						<li class="dropdown_item msg_item">
							<a href="user.html" target="_blank">
								<span>个人中心</span>
							</a>
						</li>
						<li class="dropdown_item msg_item">
							<a href="my_message.html" target="_blank">
								<span>我的消息</span>
								<span class="msg_unread unread_count show">5</span>
							</a>
						</li>
						<li class="dropdown_item">
							<a href="equipment.html">
								<span>设备</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="static/js/config.js"></script>
		<script>
			
			var vm = new Vue({
				el: '#app', //设置当前vue对象可以操作数据的范围,注意不要把vue对象绑定到body中，因为这样，vue需要控制整个页面的内容，效率太低了
				data: {
					uInfoData: [],
				},
				ready: function() {
					// this.getdata();
				},
				created: function() {
					this.getdata();
				},
				methods: {
					getdata: function() {
						var rloginName = localStorage.loginName;
						console.log(rloginName);
						if (rloginName == '' || rloginName == 'null' || rloginName == undefined) {
							layer.msg('登录过期或者无权访问！', {
								time: 1000,
								end: function() {
									location.href = 'login.html'
								}
							})
						} else {
							axios({
									method: 'GET',
									url: url + "/user/userInfo/lquserOwnInfo?phoneNum=" + rloginName,
									data: {}
								})
								.then(function(response) {
									console.log(response)
									vm.uInfoData = response.data;
								})
						}
					},
				}
			})
		</script>
	</body>
</html>
